<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<base href="<%=basePath%>">

<!DOCTYPE html>
<!-- 
Template Name: Metronic - Responsive Admin Dashboard Template build with Twitter Bootstrap 3.3.0
Version: 3.5
Author: KeenThemes
Website: http://www.keenthemes.com/
Contact: support@keenthemes.com
Follow: www.twitter.com/keenthemes
Like: www.facebook.com/keenthemes
Purchase: http://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469?ref=keenthemes
License: You must have a valid license purchased only from themeforest(the above link) in order to legally use the theme for your project.
-->
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
<!--<![endif]-->
<!-- BEGIN HEAD -->
<head>
<meta charset="utf-8" />
<title>首页</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta content="" name="description" />
<meta content="" name="author" />
</head>
<!-- BEGIN GLOBAL MANDATORY STYLES -->
 <body >
	<!-- BEGIN PAGE HEADER-->
			  <h3 class="page-title">
					 <i class="fa fa-sitemap"></i>
					 菜单 <small>管理</small>
				</h3>
				<div class="page-bar">
					<ul class="page-breadcrumb">
						<li><i class="fa fa-home"></i> <a href="index.shtml">首页</a>
							<i class="fa fa-angle-right"></i></li>
						<li><a href="#">系统管理</a> <i class="fa fa-angle-right"></i>
						</li>
						<li><a href="#">菜单管理</a></li>
					</ul>
					<div class="page-toolbar"></div>
				</div>
		 
				<div class="row">
					<div class="col-md-12">
					<!-- BEGIN SAMPLE TABLE PORTLET-->
					<div class="portlet">
					 	<div class="portlet-title">
							<div class="caption">
								<a href="#" class="btn btn-sm green">
															新增 <i class="fa fa-plus"></i>
															</a>
															<a href="#" class="btn btn-sm purple">
															<i class="fa fa-times"></i> 删除  </a>
															<a href="#" class="btn btn-sm red">
															修改 <i class="fa fa-edit"></i>
															</a>
							</div> 
							<div class="tools">
								<a href="javascript:;" class="collapse" data-original-title="" title="">
								</a>
								<a href="#portlet-config" data-toggle="modal" class="config" data-original-title="" title="">
								</a>
								<a href="javascript:;" class="reload" data-original-title="" title="">
								</a>
								<a href="javascript:;" class="remove" data-original-title="" title="">
								</a>
							</div>
						</div>  
						<div class="portlet-body">
							<div class="table-scrollable">
					  <table id="test" class=" table table-striped table-bordered table-hover dataTable no-footer"  id="sample_1">
					 </table>
							</div>
							
						</div>
					</div>
					<!-- END SAMPLE TABLE PORTLET-->
					
					
				</div>
				</div>  
				<script>
		jQuery(document).ready(function() {
			  $('#test').treegrid({
					nowrap: true,
					rownumbers: false,
					animate:true,
					collapsible: true,
					fitColumns: true,
					border:false,
					url: 'sys/menu/ajaxGetList.shtml',
					idField: 'id',
					treeField:'name',
					columns:[[
						{field:'name',formatter:formatName,title:' 菜单名称'},
						{field:'permission',title:'菜单权限'},
						{field:'href',title:'url链接'},
						{field:'lev',title:'菜单层级'},
						{field:'_parentId',title:'父节点ID',width:35},
						{field:'icon',title:'图标',width:55}
					]] 
				}); 
		});
		function formatName(value, row, index) {
			  //在名称前面显示图标就是靠iconCls属性，iconCls属性为一个css类，easyui拿到这个属性值就能显示相应的图标了
			  //由于传递过来的json字符串中未包含iconCls属性，只有icon属性，所以要想easyui显示图标只需将icon的值赋给iconCls
			  row.iconCls = row.icon;
			  return value;
			}
	</script>
</body>
<!-- END BODY -->
</html>